<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>入库管理</el-breadcrumb-item>
      <el-breadcrumb-item>入库</el-breadcrumb-item>
    </el-breadcrumb>
    <el-container>
      <el-main>
        <div id="formDiv">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="240px"
            class="demo-ruleForm"
          >
            <el-form-item label="接货编号/入库单号" prop="sourceno">
              <el-select
                v-model="ruleForm.sourceno"
                placeholder="请输入编号"
                style="width: 300px; margin: 0px"
              >
                <el-option
                  :key="item.id"
                  :label="item.value"
                  :value="item.value"
                  v-for="item in test"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="货位编码" prop="locatorcode">
              <el-select
                v-model="ruleForm.locatorcode"
                placeholder="请输入货位编码"
                style="width: 300px; margin: 0px"
              >
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="ruleForm.remark"
                style="width: 300px"
              ></el-input>
            </el-form-item>
          </el-form>
          <div style="margin-left:235px">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="submitForm('ruleForm')"
              >开始接货</el-button
            >
            <el-button type="danger" @click="resetForm" icon="el-icon-delete"
              >清除</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-check"
              @click="submitForm('ruleForm')"
              >无单接货</el-button
            >
          </div>
        </div>
      </el-main>

      <!-- 录入明细模态框 -->
      <el-dialog title="修改" :visible.sync="dialogInputVisible">
        <!-- 录入明细模态框表单 -->
        <div style="margin-left: 130px">
          <el-form :model="dialogform" :rules="rules" ref="dialogform">
            <el-form-item
              label="入库单号"
              :label-width="formLabelWidth"
              prop="warehousingno"
              aria-readonly="true"
            >
              <el-input
                v-model="dialogform.warehousingno"
                style="width: 250px; margin: 0px"
                readonly="readonly"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="商品编码"
              :label-width="formLabelWidth"
              prop="commoditybar"
            >
              <el-select
                v-model="dialogform.commoditybar"
                placeholder="请输入商品编码"
                style="width: 250px"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数量" :label-width="formLabelWidth" prop="qty">
              <el-input
                v-model="dialogform.qty"
                style="width: 250px"
              ></el-input>
            </el-form-item>
            <el-form-item label-width="115px">
              <el-button type="primary" @click="addBtn" icon="el-icon-plus"
                >新增</el-button
              >
              <el-button type="danger" @click="clear" icon="el-icon-delete"
                >清除</el-button
              >
              <el-button type="warning" @click="endBtn" icon="el-icon-check"
                >结束</el-button
              >
            </el-form-item>
          </el-form>
        </div>

        <!-- 录入明细模态框表格 -->
        <div>
          <el-table :data="dialogInputData" border>
            <el-table-column
              property="commoditybar"
              label="商品编码"
              sortable=""
            ></el-table-column>
            <el-table-column
              property="commodityname"
              label="商品名称"
              sortable=""
            ></el-table-column>
            <el-table-column
              property="qty"
              label="数量"
              sortable=""
            ></el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        sourceno: "",
        locatorcode: "",
        remark: "",
      },

      dialogInputVisible: false,
      dialogInputData: [],
      dialogform: {
        warehousingno: "",
        commoditybar: "",
        qty: "",
      },
      formLabelWidth: "120px",

      rules: {
        sourceno: [
          { required: true, message: "商品编码不能为空", trigger: "change" },
        ],
        locatorcode: [{ required: true, message: "数量不能为空", trigger: "change" }],
      },
    };
  },

  methods: {
    submitForm(formName) {
      this.dialogInputVisible = true;
    },
  },
};
</script>

<style scoped>
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
#formDiv {
  width: 600px;
  margin-top: 150px;
  margin-left: 250px;
}
</style>